<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>帖子列表</title>
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/css/bootstrap.min.css">
</head>
<body>
    <h1>帖子列表</h1>
    <form action="">
        <label for="sortId">图书分类</label>
        <input type="text" name="sortId" id="sortId">
        <input type="hidden" name="pageNo" id="pageNo">
        <input type="hidden" id="current">
        <input type="button" value="搜索">
    </form>

    <table>
        <thead>
            <tr>
                <th>帖子ID</th>
                <th>标题</th>
                <th>作者</th>
                <th>发布时间</th>
                <th>回复次数</th>
            </tr>
        </thead>
        <tbody id="rows">

        </tbody>
    </table>
    <nav aria-label="Page navigation">
        <ul class="pagination">
            <li id="previous">
                <a href="#" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            <li id="next">
                <a href="#" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>

    <script src="/js/jquery.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>

    <script>
        function goPage(pageNo,sortId) {
            $.post("/detail/page",{"pageNo":pageNo,"sortId":sortId},
            function (data) {
                //设定当前页码
                $("#current").val(data.current);

                //设定上一页，下一页是否可用
                if(data.current<2){
                    $("#previous").addClass("disabled");
                }else {
                    $("#previous").removeClass("disabled");
                }
                if(data.current<data.pages){
                    $("#next").removeClass("disabled");
                }else{
                    $("#next").addClass("disabled");
                }
                //在分页列表中组装分页
                $("#previous > a").click(function () {
                    goPage(data.current-1,$("#sortId").val());
                });
                $("#next > a").click(function () {
                    goPage(data.current+1,$("#sortId").val());
                });


                //在表格中显示数据
                $("#rows").empty();

                for(var i=0; i<data.records.length; i++){
                    var detail = data.records[i];
                    var newTr = "<tr><td>"+detail.id+"</td><td>"
                        + detail.title + "</td><td>" + detail.author +
                        "</td><td>"+ detail.createDate +"</td><td>"+
                        detail.replyCount +"</td></tr>";
                    $("#rows").append(newTr);
                }

            },"json");
        }

        $(function () {
           goPage(1,1);

           $("input:button").click(function () {
               if(isNaN($("#pageNo").val())){
                   $("#pageNo").val(1);
               }

                goPage($("#pageNo").val(),$("#sortId").val());
           });
        });

    </script>
</body>
</html>